<template>
  <!-- 门锁 - 入住信息 -->
  <div class="tabs_main">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="区域:">
        <el-select
          v-model="defaultArea"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
          @change="selectArea"
        >
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in areaInfoList"
            :key="item.areaGuid"
            :label="item.areaName"
            :value="item.areaGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋:">
        <el-select
          v-model="defaultBuilding"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
        >
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in buildingInfoList"
            :key="item.buildingGuid"
            :label="item.buildingName"
            :value="item.buildingGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 授权类型 -->
      <el-form-item label="授权类型:">
        <el-select v-model="authType" placeholder="请选择" size="mini" clearable style="width: 140px">
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in authTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="姓名/编号/卡号:">
        <el-input
          v-model="userName"
          placeholder="姓名/编号/卡号"
          size="mini"
          clearable
          style="width: 140px"
        ></el-input>
      </el-form-item>
      <el-form-item label="房间:">
        <el-input v-model="roomName" placeholder="名称" size="mini" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
        ></el-time-picker>
      </el-form-item>
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
    </el-form>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="入宿明细" name="first">
        <div v-if="Flagcheck">
          <el-table
            v-loading="loading"
            :data="detailslist"
            ref="table"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="(header) => headFirst(header, 2)"
            height="calc(100vh - 300px)"
            :cell-style="(res) => headFirst_col(res, [],2)"
          >
            <el-table-column prop="roomName" label="房间" align="center" min-width="130px"></el-table-column>
            <el-table-column
              prop="userName"
              label="姓名"
              v-if="formThead.userName.checked"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门"
              v-if="formThead.departmentName.checked"
              align="center"
              min-width="110px"
            ></el-table-column>
            <el-table-column
              prop="cardNumber"
              label="卡号"
              v-if="formThead.cardNumber.checked"
              align="center"
              min-width="110px"
            ></el-table-column>

            <!-- 开门-礼拜 -->
            <el-table-column
              prop="Sunday"
              label="星期"
              v-if="formThead.Sunday.checked"
              align="center"
            >
              <el-table-column
                prop="monday"
                label="一"
                v-if="formThead.monday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.monday"
                    :value="scope.row.monday == 1"
                    @change="handleChange(scope.row, 'monday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="tuesday"
                label="二"
                v-if="formThead.tuesday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.tuesday"
                    :value="scope.row.tuesday == 1"
                    @change="handleChange(scope.row, 'tuesday', scope.$index)"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                prop="wednesday"
                label="三"
                v-if="formThead.wednesday.checked"
                align="center"
                width="35px"
                :disabled="true"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.wednesday"
                    :value="scope.row.wednesday == 1"
                    @change="handleChange(scope.row, 'wednesday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="thursday"
                label="四"
                v-if="formThead.thursday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.thursday"
                    :value="scope.row.thursday == 1"
                    @change="handleChange(scope.row, 'thursday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                prop="friday"
                label="五"
                v-if="formThead.friday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.friday"
                    :value="scope.row.friday == 1"
                    @change="handleChange(scope.row, 'friday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                prop="saturday"
                label="六"
                v-if="formThead.saturday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.saturday"
                    :value="scope.row.saturday == 1"
                    @change="handleChange(scope.row, 'saturday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                prop="sunday"
                label="日"
                v-if="formThead.sunday.checked"
                align="center"
                width="35px"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    :model="scope.row.sunday"
                    :value="scope.row.sunday == 1"
                    @change="handleChange(scope.row, 'sunday')"
                    :disabled="true"
                  ></el-checkbox>
                </template>
              </el-table-column>
            </el-table-column>

            <!-- 星期时段 -->
            <el-table-column
              prop="SundayTime"
              label="星期时段"
              v-if="formThead.SundayTime.checked"
              align="center"
            >
              <el-table-column
                prop="mondayTimeStageIndex"
                label="一"
                v-if="formThead.mondayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>
              <el-table-column
                prop="tuesdayTimeStageIndex"
                label="二"
                v-if="formThead.tuesdayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>

              <el-table-column
                prop="wednesdayTimeStageIndex"
                label="三"
                v-if="formThead.wednesdayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>

              <el-table-column
                prop="thursdayTimeStageIndex"
                label="四"
                v-if="formThead.thursdayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>
              <el-table-column
                prop="fridayTimeStageIndex"
                label="五"
                v-if="formThead.fridayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>
              <el-table-column
                prop="saturdayTimeStageIndex"
                label="六"
                v-if="formThead.saturdayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>
              <el-table-column
                prop="sundayTimeStageIndex"
                label="日"
                v-if="formThead.sundayTimeStageIndex.checked"
                align="center"
                width="38px"
              ></el-table-column>
            </el-table-column>
            <!-- 假日时段 -->
            <el-table-column
              prop="holidayTimeStageIndex"
              label="假日时段"
              v-if="formThead.holidayTimeStageIndex.checked"
              align="center"
              width="40px"
            ></el-table-column>
            <el-table-column
              prop="backLock"
              label="反锁开门"
              v-if="formThead.backLock.checked"
              align="center"
              width="40px"
            >
              <template slot-scope="scope">
                <el-checkbox
                  :model="scope.row.backLock"
                  :value="scope.row.backLock == 1"
                  @change="handleChange(scope.row, 'backLock')"
                  :disabled="true"
                ></el-checkbox>
              </template>
            </el-table-column>
            <!-- 有效时间 -->
            <el-table-column
              prop="endTime"
              label="有效期"
              v-if="formThead.endTime.checked"
              align="center"
              min-width="150px"
            ></el-table-column>

            <!-- 授权状态 -->
            <el-table-column
              prop="empowerType"
              label="授权类型"
              v-if="formThead.empowerType.checked"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.empowerType | handleEmpowerType }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateFlag" label="状态" align="center" min-width="110px">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.updateFlag | updateFlagType
                  }}{{ scope.row.downloadState | downloadStateType }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangepage"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="入宿统计" name="second">
        <el-table
          v-loading="loading"
          :data="lodgingList"
          ref="table1"
          border
          highlight-current-row
          style="width: 100%"
          :header-cell-style="headFirst"
          height="calc(100vh - 300px)"
          :cell-style="(res) => headFirst_col(res, [],2)"
        >
          <el-table-column prop="buildingName" label="楼栋" align="center"></el-table-column>
          <el-table-column prop="roomName" label="房间" align="center"></el-table-column>
          <el-table-column prop="empowerSumCount" label="当前授权总数" align="center"></el-table-column>
          <el-table-column prop="empowerCount" label="时段内添加授权人数" align="center"></el-table-column>
          <el-table-column prop="empowerDeleteCount" label="时段内删除授权人数" align="center"></el-table-column>
          <el-table-column prop="empowerUploadCount" label="授权已上传" align="center"></el-table-column>
          <el-table-column prop="empowerWaitCount" label="授权待上传" align="center"></el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChangepage1"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount1"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //
      // tabs控制属性
      activeName: 'first',
      Flagcheck: true,

      // 导出表格名称
      filename: '入宿明细',
      filename1: '入宿统计',
      // 入住信息form数据
      elform: {},
      // 时间
      datetime: [],
      time: [],
      // 授权类型
      authType: '',
      // 类型列表
      authTypeList: [
        {
          label: '指定房间',
          value: 1
        },
        {
          label: '角色授权',
          value: 2
        },
        {
          label: '临时授权',
          value: 3
        },
        {
          label: '导入授权',
          value: 4
        }
      ],
      // 默认选择的区域
      defaultArea: '',
      // 区域列表
      areaInfoList: [],
      // 楼栋默认
      defaultBuilding: '',
      // 楼栋列表
      buildingInfoList: [],
      // 房间号信息
      roomName: '',
      // 姓名/编号/卡号信息
      userName: '',
      // 表格加载
      loading: false,
      /**
       * 入宿明细参数
       */
      // 房内授权信息
      detailslist: [],
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      // 授权信息表头
      formThead: {
        userName: {
          label: '用户',
          prop: 'userName',
          checked: true
        },
        departmentName: {
          label: '编号',
          prop: 'departmentName',
          checked: true
        },
        cardNumber: {
          label: '卡号',
          prop: 'cardNumber',
          checked: true
        },
        endTime: {
          label: '开门有效期',
          prop: 'endTime',
          checked: true
        },
        backLock: {
          label: '反锁开门',
          prop: 'backLock',
          checked: true
        },
        Sunday: {
          label: '星期',
          prop: 'backLock',
          checked: true
        },
        monday: {
          label: '星期一',
          prop: 'monday',
          checked: true
        },

        tuesday: {
          label: '星期二',
          prop: 'tuesday',
          checked: true
        },
        wednesday: {
          label: '星期三',
          prop: 'wednesday',
          checked: true
        },
        thursday: {
          label: '星期四',
          prop: 'thursday',
          checked: true
        },
        friday: {
          label: '星期五',
          prop: 'friday',
          checked: true
        },
        saturday: {
          label: '星期六',
          prop: 'saturday',
          checked: true
        },
        sunday: {
          label: '星期日',
          prop: 'sunday',
          checked: true
        },
        SundayTime: {
          label: '星期时段',
          prop: 'SundayTime',
          checked: true
        },
        mondayTimeStageIndex: {
          label: '星期一',
          prop: 'mondayTimeStageIndex',
          checked: true
        },
        tuesdayTimeStageIndex: {
          label: '星期二',
          prop: 'tuesdayTimeStageIndex',
          checked: true
        },
        wednesdayTimeStageIndex: {
          label: '星期三',
          prop: 'wednesdayTimeStageIndex',
          checked: true
        },
        thursdayTimeStageIndex: {
          label: '星期四',
          prop: 'thursdayTimeStageIndex',
          checked: true
        },
        fridayTimeStageIndex: {
          label: '星期五',
          prop: 'fridayTimeStageIndex',
          checked: true
        },
        saturdayTimeStageIndex: {
          label: '星期六',
          prop: 'saturdayTimeStageIndex',
          checked: true
        },
        sundayTimeStageIndex: {
          label: '星期七',
          prop: 'sundayTimeStageIndex',
          checked: true
        },
        holidayTimeStageIndex: {
          label: '假日时段',
          prop: 'holidayTimeStageIndex',
          checked: true
        },
        empowerType: {
          label: '授权状态',
          prop: 'empowerType',
          checked: true
        }
      },
      // 入宿信息
      lodgingList: [],
      pageNum1: 1,
      pageSize1: 20,
      currentPage1: 1,
      recordCount1: 0
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    // 初始化时间
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
    // 区域列表
    this.getAreaInfo()
  },
  filters: {
    handleEmpowerType(empower) {
      if (empower == 0) {
        return '未授权'
      }
      if (empower == 1) {
        return '指定房间'
      }
      if (empower == 2) {
        return '角色授权'
      }
      if (empower == 3) {
        return '临时授权'
      }
      if (empower == 4) {
        return '导入授权'
      }
    },
    updateFlagType(val) {
      val = Number(val)
      switch (val) {
        case 1:
          return '新增,'
          break
        case 2:
          return '覆盖,'
          break
        case 3:
          return '删除,'
          break
      }
    },
    downloadStateType(val) {
      console.log(val)
      val = Number(val)
      switch (val) {
        case 0:
          return '未下载'
          break
        case 1:
          return '待下载'
          break
        case 2:
          return '下载成功'
          break
        case 3:
          return '下载失败'
          break
        case 4:
          return '设备名单已满'
          break
        case 5:
          return '名单内容有误'
          break
        case 6:
          return '找不到对应的设备'
          break
        case 7:
          return '名单已过期'
          break
      }
    }
  },
  mounted() {
    //   this.onSubmit()
  },
  methods: {
    // tabs控制
    handleClick(tab, event) {},
    // 选择时间后触发
    selecttime() {
      console.log(this.defaultArea)
    },
    // 区域查询
    getAreaInfo() {
      this.$http({
        url: this.$http.adornUrl('/area/room/area-info-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.areaInfoList = data.messageContent
          console.log(data.messageContent)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 选择区域后触发
    selectArea() {
      console.log(this.defaultArea)
      this.defaultBuilding = ''
      this.buildingInfoList = []
      if (this.defaultArea == '') {
        return
      }
      // 获取对应区域内的楼栋信息
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-building'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            areaGuid: this.defaultArea
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.buildingInfoList = data.messageContent
        } else {
          this.$message.error(data.errorMessage)
        }
      })
      // this.getAreaInfo();
    },
    // 查询
    onSubmit() {
      //
      this.loading = true
      let searchInfo = {}
      // 日期限定
      if (this.datetime != null) {
        if (this.datetime.length != 0) {
          searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
          searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
        }
      }
      // 类型限定
      if (this.authType != '') {
        searchInfo.empowerType = this.authType
      }
      // 区域限定
      if (this.defaultArea != '') {
        searchInfo.areaGuid = this.defaultArea
      }
      // 楼栋限定
      if (this.defaultBuilding != '') {
        searchInfo.buildingGuid = this.defaultBuilding
      }
      // 姓名/编号/卡号  规则
      if (this.userName != '') {
        searchInfo.userData = this.userName
      }
      // 房间限定
      if (this.roomName != '') {
        searchInfo.roomName = this.roomName
      }
      searchInfo.unitGuid = this.changeschoolid

      this.searchInfo = searchInfo
      // 入宿明细
      if (this.activeName == 'first') {
        this.pageNum = 1
        this.getEmpower()
      }
      // 入宿统计
      if (this.activeName == 'second') {
        this.pageNum1 = 1
        this.getlodging()
      }
    },

    // 入宿明细
    getEmpower() {
      this.$http({
        url: this.$http.adornUrl('/terminal/doorLock/empower-name-search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          this.currentPage = data.messageContent.pageNum

          this.detailslist = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 入宿统计
    getlodging() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/doorLock/empower-lodging-details-search-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum1,
            pageSize: this.pageSize1,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
          }
          this.loading = false
          // 入宿信息
          this.lodgingList = data.messageContent.data
          this.recordCount1 = data.messageContent.recordCount
          this.currentPage1 = data.messageContent.pageNum

          console.log(data.messageContent.data)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出数据需要用到的
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 入住明细导出
    firstExport(detailslist) {
      detailslist.map(item => {
        this.authTypeList.map(itemType => {
          if (item.empowerType == itemType.value) {
            item.empowerType = itemType.label
          }
        })
      })
      require.ensure([], () => {
        let multiHeader = [
          [
            '房间',
            '姓名',
            '部门',
            '卡号',
            '星期',
            '',
            '',
            '',
            '',
            '',
            '',
            '星期时段',
            '',
            '',
            '',
            '',
            '',
            '',
            '假日时段',
            '反锁开门',
            '有效期',
            '授权类型'
          ]
        ]
        let merges = [
          'A1:A2',
          'B1:B2',
          'C1:C2',
          'D1:D2',
          'E1:K1',
          'L1:R1',
          'S1:S2',
          'T1:T2',
          'U1:U2',
          'V1:V2'
        ]
        let tHeader = [
          '房间',
          '姓名',
          '部门',
          '卡号',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '假日时段',
          '反锁开门',
          '有效期',
          '授权类型'
        ]
        let filterValArr = [
          'roomName',
          'userName',
          'departmentName',
          'cardNumber',
          'monday',
          'tuesday',
          'wednesday',
          'thursday',
          'friday',
          'saturday',
          'sunday',
          'mondayTimeStageIndex',
          'tuesdayTimeStageIndex',
          'wednesdayTimeStageIndex',
          'thursdayTimeStageIndex',
          'fridayTimeStageIndex',
          'saturdayTimeStageIndex',
          'sundayTimeStageIndex',
          'holidayTimeStageIndex',
          'backLock',
          'endTime',
          'empowerType'
        ]
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = detailslist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename + this.getimeto(),
          tableheader: '2'
        })
      })
    },
    // 入住统计导出
    secondExport(lodgingList) {
      require.ensure([], () => {
        const multiHeader = []
        const multiHeader2 = []
        const merges = []

        let filterValArr = [
          'buildingName',
          'roomName',
          'empowerSumCount',
          'empowerCount',
          'empowerDeleteCount',
          'empowerUploadCount',
          'empowerWaitCount'
        ]
        let tHeader = [
          '楼栋',
          '房间',
          '当前授权总数',
          '时段内添加授权人数',
          '时段内删除授权人数',
          '授权已上传',
          '授权待上传'
        ]
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = lodgingList
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename1 + this.getimeto()
        })
      })
    },
    // 导出
    onExport() {
      console.log('导出')
      if (this.activeName == 'first') {
        if (this.detailslist.length == 0) {
          this.$message({
            message: '无数据可导出',
            type: 'warning'
          })
          return false
        }
        this.$http({
          url: this.$http.adornUrl(
            '/terminal/doorLock/empower-name-search-page'
          ),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              asc: true,
              pageNum: 1,
              pageSize: this.recordCount,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          console.log(data)
          if (data.messageCode == 200) {
            this.firstExport(data.messageContent.data)
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
      // 入宿统计
      if (this.activeName == 'second') {
        console.log('second')
        if (this.lodgingList.length == 0) {
          this.$message({
            message: '无数据可导出',
            type: 'warning'
          })
          return false
        }
        this.$http({
          url: this.$http.adornUrl(
            '/terminal/doorLock/empower-lodging-details-search-page'
          ),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              asc: true,
              pageNum: 1,
              pageSize: this.recordCount1,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            this.secondExport(data.messageContent.data)
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getEmpower()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getEmpower()
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.getlodging()
    },
    handleCurrentChangepage1(val) {
      this.pageNum1 = val
      this.getlodging()
    },
    getHeaderDate(val) {
      this.formThead = val
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs_main {
  padding: 10px;
  .demo-form-inline,
  .demo-form-inline1 {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }

  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>